@import "src/styles/variable.scss";

$nodeFontSize: 10px;

.home-page {
    height: 100%;
    .home-page-content {
        height: calc(100vh - 46px);
        background: $backgroundGray;
        padding: 10px 10px 20px 10px;
        overflow-y: auto;

        .adm-card {
            margin-bottom: 12px;
            .adm-card-body {
                &:first-child {
                    height: 240px;
                    overflow: hidden;
                }
                //项目报审节点
                .projApprovalNode {
                    overflow: hidden;
                    .node-content {
                        overflow-x: auto;
                        .c-ai_c {
                            display: flex;
                            align-items: center;
                        }
                        .node-item {
                            justify-content: space-between;

                            .node-title {
                                font-size: $nodeFontSize;
                                color: #354052;
                                font-weight: 400;
                                white-space: nowrap;
                            }
                            .item-content {
                                &.c-flex {
                                    display: flex;
                                }
                                margin-left: 6px;
                                justify-content: space-between;
                                .item-box {
                                    position: relative;
                                    padding-right: 11px;
                                    img {
                                        height: 16px;
                                        width: 16px;
                                        margin: 0;
                                        position: absolute;
                                        right: -2px;
                                        z-index: 1000;
                                    }
                                    .node-name {
                                        padding: 0 2px;
                                        font-size: $nodeFontSize;
                                        font-weight: 400;
                                        margin: 5px 0;
                                        white-space: nowrap;
                                        text-align: left;
                                    }
                                    .first-node {
                                        padding-left: unset;
                                    }
                                }
                                .item-box-success {
                                    background-color: #4acb82;
                                    color: #ffffff;
                                }
                                .item-box-process {
                                    background: #dfe5ed;
                                    color: #435074;
                                }
                                .item-box-noSubmit {
                                    background: #dfe5ed;
                                    color: #a7b1be;
                                }
                                .item-box:first-child {
                                    border-radius: 20px 0 0 20px;
                                    padding-left: 11px;
                                }
                                .item-box:last-child {
                                    border-radius: 0 20px 20px 0;
                                    padding-right: 15px;
                                    .node-name {
                                        padding-right: 5px;
                                    }
                                    img {
                                        right: -10px;
                                    }
                                }
                            }
                        }
                        .node-item:nth-child(n + 1) {
                            margin-top: 10px;
                        }
                    }
                }
                //文件数量统计
                .fileCount-container {
                    // padding: 0 10px 10px 10px;
                    .chart-container {
                        width: 100%;
                        height: 280px;
                        // .fileChart {
                        //     width: 100vh;
                        //     height: 400px;
                        // }
                    }
                }
            }
            .adm-card-header {
                &::before {
                    content: "";
                    width: 4px;
                    height: 18px;
                    background-color: $backgroundBlue;
                    position: absolute;
                    left: 0px;
                    top: 14px;
                }
                .adm-card-header-title {
                    padding-left: 10px;
                }
            }
            &.menus-list {
                .adm-card-body {
                    display: flex;
                    flex-wrap: wrap;
                    .menu-item {
                        // flex: 25%;
                        display: flex;
                        padding: 10px;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        img {
                            width: 60px;
                            height: 60px;
                            border-radius: 10px;
                        }
                        .title {
                            max-width: 60px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
    .home-pop {
        .adm-popup-body {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: 16px;
            padding: 8px;
            background-color: $modalBackgroundGary;
            .adm-popup-body-position-bottom .adm-popup-close-icon {
                top: 12px;
            }
            h2 {
                text-align: center;
            }
            .list {
                height: calc(100% - 46px);
                padding: 10px;
                border-radius: 20px;
                background: #fff;
                overflow-y: scroll;
                .list-item {
                    padding: 10px;
                    border-bottom: 1px solid #ccc;
                }
            }
        }
    }
}
